<template>
    <div class="table">
       
        <div class="container">
            <div class="handle-box">
                 <el-input v-model="select.name" style="width:250px;" placeholder="请输入名称" class="handle-input mr10"></el-input>
                 <el-input v-model="select.hsCodeId" style="width:150px;" placeholder="请输入hs编码" class="handle-input mr10"></el-input>
                 <el-select v-model="select.orgId" placeholder="选择企业">
                      <el-option
                        v-for="item in companylist"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                 </el-select>
                 <el-select v-model="select.status" placeholder="审核状态">
                      <el-option
                        v-for="item in status"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                 </el-select>
                <el-button type="primary" @click="searchData">搜索</el-button>
            </div>
            <el-table :data="data"  v-loading.body="listLoading" class="table"  >
                <el-table-column prop="name" label="名称"  width="250">
                </el-table-column>
                <el-table-column prop="hsCode.id" label="hs编码" width="250">
                </el-table-column>
                <el-table-column prop="org.name" label="申报企业" width="250">
                </el-table-column>
                <el-table-column prop="checkStatus" label="状态" width="150"  :formatter="formatStatus">
                </el-table-column>
                <el-table-column label="操作"  align="center" prop="id">
                    <template slot-scope="scope" >
                        <el-button type="text" v-show="scope.row.apply" @click="handleEdit(scope.$index, scope.row)">取消备案申请</el-button>
                        <el-button  type="text"  v-show="!scope.row.apply"  @click="handleEdit(scope.$index, scope.row)">提交审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div> -->
              <div class="pagination-container">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo" :page-sizes="[5,10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
              </div>
        </div>

     



    </div>
</template>

<script>
import {QueryOrg} from '@/api/company';
import {QueryGoods,ApplyGoods,CancelGoods} from '@/api/declaration';
    export default {
        name: 'basetable',
        data() {
            return {
                tableData: [],
                multipleSelection: [],
                del_list: [],
                editVisible: false,
                select:{
                    name:'',
                    hsCodeId:'',
                    status:'',
                    orgId:''
                },
                status:[
                    {label:'暂存',value:'temp'},
                    {label:'待审',value:'wait'},
                    {label:'通过',value:'ok'},
                    {label:'有问题退回',value:'problem'}],
                companylist:[],
                form: {},
                total: 0,
                listLoading: false,
                listQuery: {
                    pageNo: 1,
                    pageSize: 10
                }
            }
        },
        created() {
            this.getData();
            QueryOrg({resultType:'list'}).then(res=>{
                this.companylist=res.data.map(item=>{
                    return {label:item.name,value:item.id}
                })
            })
        },
        computed: {
            data() {
                return this.tableData.filter((d) => {
                    return d;
                })
            }
        },
        methods: {
            formatStatus(row){
                return this.switchstatus(row)
            },
            switchstatus(row){
                 switch(row.checkStatus){
                        case 'temp':
                            return '暂存';
                            break;
                        case 'wait':
                            return '待审';
                            break;
                        case 'ok':
                            return '通过';
                            break;
                        case 'problem':
                            return '有问题退回';
                            break;
                        default:
                            return '异常';
                            break;
                    }
            },
            // 分页导航
           handleSizeChange(val) {
            this.listQuery.pageSize = val
            this.getData(this.select)
            },
            handleCurrentChange(val) {
            this.listQuery.pageNo = val
            this.getData(this.select)
            },
            getData(data) {
                var arg=Object.assign(this.listQuery,{
                    resultType:"pagination",
                    fetchHsCode: true,
                    fetchOrg: true,
                    fetchCountry: true
                })
                if(data){
                    arg.name=this.select.name;
                    arg.nameLike=true;
                    arg.orgId=this.select.orgId;
                    arg.hsCodeId=this.select.hsCodeId;
                    arg.checkStatus=this.select.status;
                }else{
                   delete arg.nameLike;
                }
                // this.listLoading=true;
                this.tableData=[]
               QueryGoods(arg).then(res=>{
                   this.tableData=res.data.list.map(
                       item=>{
                           if(item.checkStatus=='ok' || item.checkStatus=='wait'){
                                item.apply=true
                                return item
                           }else{
                               item.apply=false
                               return item
                           }
                       }
                   )
                   this.listLoading=false;
                   this.total=res.data.totalCount;
                console.log(this.tableData)
               })
            },
            searchData() {
                //带参数查询
                this.listQuery.pageNo=1;
                this.getData(this.select)
            },
            dateFtt(nS){  
                return new Date(parseInt(("/Date("+nS+")/").substr(6, 13))).toLocaleDateString();     
            } ,
            handleEdit(index,row){
                console.log(row)
                // apply true取消申请，false申请
                if(row.apply){
                    CancelGoods({ebRegisterGoodsId:row.id}).then(res=>{
                        this.getData(this.select)
                    })
                }else{
                    ApplyGoods({ebRegisterGoodsId:row.id}).then(res=>{
                         this.getData(this.select)
                    })
                }
            }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
</style>
